<template>
     <el-form :inline="true">
      <el-form-item label="承运商名称">
      <el-input  v-model="ABC.carriers_Name" placeholder="请输入承运商名称" />
    </el-form-item>
    <el-button type="primary" @click="handleQuery">查询</el-button>
    <el-button plain @click="logic.isOpan = true">
    新增
  </el-button>
  </el-form>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="carriers_Id" label="编号" width="120" />
    <el-table-column prop="carriers_Name" label="承运商名称" width="120" />
    <el-table-column prop="carriers_LogisticsCmp" label="承运商物流公司" width="120"/>
    <el-table-column prop="carriers_Code" label=" 承运商编码" width="120"/>
    <el-table-column prop="area_Name" label="区域编号" width="120"/>
    <el-table-column prop="carriers_FullAddress" label="详细地址" width="120"/>
    <el-table-column prop="carriers_Zip" label="邮编" width="120"/>
    <el-table-column prop="carriers_Contact" label="联系人" width="120"/>
    <el-table-column prop="carriers_LandlineNumber" label="固定电话" width="120"/>
    <el-table-column prop="carriers_Phone" label="电话" width="120"/>
    <el-table-column prop="carriers_Fax" label="传真" width="120"/>
    <el-table-column prop="carriers_Email" label="邮箱" width="120"/>
    <el-table-column prop="carriers_Remark" label="备注" width="120"/>
    <el-table-column label="操作" width="120">
      <template  v-slot="scope">
        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="ABC.pageIndex"
      v-model:page-size="ABC.pageSize"
      :page-sizes="[5, 10, 15]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="ABC.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页" next-text="下一页"
    />
    <!-- <table>
    <tr>
      <td>
        <el-pagination
      v-model:current-page="ABC.pageIndex"
      v-model:page-size="ABC.pageSize"
      :page-sizes="[10, 15, 20]"
      :background="true"
      layout="slot"
      :total="ABC.totalCount"
    >
    一共 <span style="color: red;">{{ABC.totalCount}}</span> 条数据,每页显示 
        <span style="color: red;">{{ABC.pageSize}}</span > 条,当前 <span style="color: red;">{{ABC.pageIndex}}          
        </span> \ <span style="color: red;">{{ABC.totalPage}}</span> 页
  </el-pagination>
      </td>
      <td>
        <el-pagination
      v-model:current-page="ABC.pageIndex"
      v-model:page-size="ABC.pageSize"
      :page-sizes="[1, 3, 5]"
      :background="true"
      layout="total,slot, sizes, prev, pager, next, jumper"
      :total="ABC.totalCount"
      prev-text="上一页" next-text="下一页"
    >
  <template #default="scoped">
    <el-button type="primary">首页</el-button>
  </template>
  </el-pagination>
      </td>
      <td></td>
    </tr>
  </table> -->
  <div>
    <el-dialog v-model="logic.isOpan " :title="logic.title" width="500">
    <el-form :model="form" trigger="submit" label-width="100px">
      <el-form-item label="承运商名称" >
        <el-input v-model="form.carriers_Name"/>
      </el-form-item>
      <el-form-item label="线上物流公司">
        <el-input v-model="form.carriers_LogisticsCmp"/>
      </el-form-item>
      <el-form-item label="承运商编码">
        <el-input v-model="form.carriers_Code"/>
      </el-form-item>
      <!-- <el-form-item label="国家">
        <el-select v-model="form.carriers_AddressId" placeholder="请选择">
          <el-option v-for="item in carriers" :label="item.label" :value="item.value" />
      </el-select>
      </el-form-item> -->
      <el-form-item label="详细地址">
        <el-input v-model="form.carriers_FullAddress"/>
      </el-form-item>
      <el-form-item label="邮编">
        <el-input v-model="form.carriers_Zip"/>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="form.carriers_Contact"/>
      </el-form-item>
      <el-form-item label="固定电话">
        <el-input v-model="form.carriers_LandlineNumber"/>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="form.carriers_Phone"/>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="form.carriers_Fax"/>
      </el-form-item>
      <el-form-item label="传真">
        <el-input v-model="form.carriers_Email"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.carriers_Remark"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isOpan = false">取 消</el-button>
        <el-button type="primary" @click="handleAddOrEdit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>

    

</template>
<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted,reactive } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus' 
axios.defaults.baseURL = 'http://localhost:5259'
//逻辑
const logic =reactive({
      isOpan:false,
      title:"",
      Add:true,
})

const form = reactive({
  carriers_Name: "",
  carriers_LogisticsCmp: "",
  carriers_Code: "",
  carriers_AddressId: "",
  carriers_FullAddress: "",
  carriers_Zip: "",
  carriers_Contact: "",
  carriers_LandlineNumber: "",
  carriers_Phone: "",
  carriers_Fax: "",
  carriers_Email: "",
  carriers_Remark: ""
})
//区域
const carriers=ref([])
//查询
const Getndustries=()=>{
    axios.get("http://localhost:5115/api/Login/GetAreaInformation").then(res=>{
      carriers.value=res.data.data
    })
}
const handleAddOrEdit = () => {
  if (logic.Add) {
    axios.post('/api/Carriers/Carriers',form).then(res => {
      if (res.data.code == 200) {
        ElMessage.success('添加成功')
        handleQuery()
      }
      logic.isOpan = false
      handleQuery()
    })
   }
   else 
   {
     axios.post('/api/Carriers/UpdCarriers',form).then(res => {
      if (res.data.code == 200) {
        ElMessage.success('修改成功')
        handleQuery()
      }
      logic.isOpan = false
      handleQuery()
     })
   }
  }

    
const tableData = ref([])
const ABC = reactive({
  carriers_Name: '',
  totalCount: 0,
  totalPage: 0,
  pageIndex: 1,
  pageSize: 5,
})
onMounted(() => {
  handleQuery()
  Getndustries()
})
//显示
const handleQuery = () => {
  axios.get('http://localhost:5115/api/Login/GetCarriers', {
    params: {
      carriers_Name: ABC.carriers_Name,
      pageIndex: ABC.pageIndex,
      pageSize: ABC.pageSize,
    }
  }).then(res => {
    tableData.value = res.data.data.data
    console.log(res)
    ABC.totalCount = res.data.data.totalCount
    ABC.totalPage = res.data.data.totalPage
  })
}
//删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确定删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    axios.post("/api/Carriers/DelCarriers",row).then(res=>{
      if(res.data.code==200)
      {
        ElMessage.success("删除成功")
        handleQuery()
      }
      else
      {
        ElMessage.error("删除失败")
      }
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

const handleEdit = (row: any) => {
  logic.isOpan = true
  if(row==null)
  {
    logic.title="承运商新增"
    logic.Add=true
    form.carriers_Name=""
    form.carriers_LogisticsCmp=""
    form.carriers_Code=""
    form.carriers_AddressId=""
    form.carriers_FullAddress=""
    form.carriers_Zip=""
    form.carriers_Contact=""
    form.carriers_LandlineNumber=""
    form.carriers_Phone=""
    form.carriers_Fax=""
    form.carriers_Email=""
    form.carriers_Remark=""
  }
  else
  {
    logic.title="承运商修改"
    logic.Add=false
    form.carriers_Name=row.carriers_Name
    form.carriers_LogisticsCmp=row.carriers_LogisticsCmp
    form.carriers_Code=row.carriers_Code
    form.carriers_AddressId=row.carriers_AddressId
    form.carriers_FullAddress=row.carriers_FullAddress
    form.carriers_Zip=row.carriers_Zip
    form.carriers_Contact=row.carriers_Contact
    form.carriers_LandlineNumber=row.carriers_LandlineNumber
    form.carriers_Phone=row.carriers_Phone
    form.carriers_Fax=row.carriers_Fax
    form.carriers_Email=row.carriers_Email
    form.carriers_Remark=row.carriers_Remark
  }
}



const handleSizeChange = (val: number) => {
  ABC.pageSize = val
  handleQuery()
}
const handleCurrentChange = (val: number) => {
  ABC.pageIndex = val
  handleQuery()
}
</script>
  